New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@leafygreen-ui/typography

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/typography

leafyGreen UI Kit Typography

11.0.2
Source
npm

Version published: 3 years ago

Weekly downloads: 608K; decreased by-24%

Maintainers: 4

Weekly downloads

Created: 5 years ago

Source

Typography

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/typography

NPM

npm install @leafygreen-ui/typography

Peer Dependencies

Package	Version
`@leafygreen-ui/leafygreen-provider`	`^1.1.0`

Example

import { H1, H2, Subtitle, Body, InlineCode, Disclaimer, Overline } from '@leafygreen-ui/typography';
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<Subtitle>Subtitle</Subtitle>
<Body weight="medium">Body</Body>
<InlineCode>Code</InlineCode>
<>
  <InlineKeyCode>CTRL</InlineKeyCode>
  <InlineCode>+</InlineCode>
  <InlineKeyCode>C</InlineKeyCode>
</>
<Disclaimer>Disclaimer</Disclaimer>
<Overline>Overline</Overline>
<Link href="http://mongodb.design">MongoDB.design</Link>

Output HTML

<h1 class="leafygreen-ui-wbskfk">Heading 1</h1>
<h2 class="leafygreen-ui-1t0mh6j">Heading 2</h2>
<h3 class="leafygreen-ui-1t0mh6j">Heading 3</h3>
<h6 class="leafygreen-ui-1dmxpt6">Subtitle</h6>
<div class="leafygreen-ui-wkgw79">Body</div>
<code class="leafygreen-ui-18bk0d8">Code</code>
<code class="leafygreen-ui-1vl51l4">CTRL</code
><code class="leafygreen-ui-1vl51l4">+</code
><code class="leafygreen-ui-1vl51l4">C</code>
<small class="leafygreen-ui-1cggyhz">Disclaimer</small>
<div class="leafygreen-ui-vezyzr">Overline</div>
<a
  href="http://mongodb.design"
  target="_blank"
  class="leafygreen-ui-1toaa4e"
  data-leafygreen-ui="anchor-container"
>
  <span>MongoDB.design</span>
  <svg
    width="16px"
    height="16px"
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <title>Open in New Tab</title>
  </svg>
</a>

Properties

All props extend the HTMLElementProps of their root tag, however the below components accept extra props

Component	Root
`H1`	`h1`
`H2`	`h2`
`H3`	`h3`
`Subtitle`	`h6`
`Body`	`p`
`InlineCode`	`code`
`InlineKeyCode`	`code`
`Disclaimer`	`small`
`Overline`	`p`
`Link`	`a`
`Label`	`label`
`Description`	`p`

Body

Prop	Type	Description	Default
`weight`	`'regular'`, `'medium'`	font-weight applied to typography element	`'regular'`
`as`	`keyof JSX.IntrinsicElements`	HTML tag to be rendered by the `<Box />` component. Note: This will supersede the behavior of any other props.	`'p'`

InlineCode

Prop	Type	Description	Default
`href`	`string`, `undefined`	If an `href` prop is passed to `InlineCode` it will be rendered with an `a` tag wrapping the `code` tag. Otherwise, it'll simply render as a `code` tag.
`darkMode`	`boolean`	Determines if the component renders in dark mode

Overline

Prop	Type	Description	Default
`as`	`React.ElementType`	The component or HTML tag to be rendered by the `<Box />` component. Note: This will supersede the behavior of any other props.	`p`

Link

Prop	Type	Description	Default
`arrowAppearance`	`'hover'`, `'persist'`, `'none'`	Displays a right arrow adjacent to the anchor tag. When set to `persist` the arrow will always be present. When set to `hover`, the arrow will only appear when hovering over the arrow.	`'none'`
`hideExternalIcon`	`boolean`	Hides the external icon when the current host name is different from the host of the destination URL	`false`

Label

Prop	Type	Description	Default
`darkMode`	`boolean`	Determines if the component renders in dark mode	`false`
`disabled`	`boolean`	Determines whether the component should appear disabled	`false`

Description

Prop	Type	Description	Default
`darkMode`	`boolean`	Determines if the component renders in dark mode	`false`

Note: If the current host name is different from the host of the destination URL, we will provide the "_blank" value for the target prop. When the target is set to open in a new tab, we render an icon as a visual affordance.

FAQs

What is @leafygreen-ui/typography?

Is @leafygreen-ui/typography popular?

Is @leafygreen-ui/typography well maintained?

Package last updated on 06 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install